<template>
    <div class='approval'>
      <el-card class="box-card" style="margin-top: 110px;">
        <div class='title'>
          {{$t('achievements.title1')}}
        </div>
        <div class='menu-search'> 
            <div class='menu-title'>
              <!-- APP渠道 -->
              <div class='searchItem'>
                <span>{{$t('ElectricChannel.AppChannel')}}</span>
                <el-select v-model='listQuery.clientId' size='small'>
                    <el-option
                    v-for='item in appChannel'
                    :key='item.channel'
                    :label='item.org_name'
                    :value='item.channel'>
                    </el-option>
                </el-select>
              </div>
              <!-- 首借/复借 -->
              <div class='searchItem' style="margin-left: 30px;">
                <el-checkbox v-model="checked1">{{$t('ModelDisplay.FirstBorrowing')}}</el-checkbox>
                <el-checkbox v-model="checked2">{{$t('RiskManager.DoubleLending')}}</el-checkbox>
              </div>
              <div class='menu-title-btn'>
                  <button type='button' @click='search'>
                      {{$t('btn.query')}}
                  </button>
              </div>
            </div>
        </div>
      </el-card>
        <el-card class='box-card' style="margin-top: 10px;margin-bottom: 20px;">
          <div class='title'>
              {{$t('ElectricChannel.dataList')}}
          </div>
          <el-table
              v-loading="listLoading"
              :data='tableData'
              tooltip-effect='dark'
              style='width: 100%; margin-top: 5px;'
              border
              size='mini'>
              <el-table-column>
                <!-- 编号 -->
                <el-table-column
                  :label="$t('RiskManager.number')"
                  header-align='center'
                  align='center'
                  width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.index}}</span>
                  </template>
                </el-table-column>
                <!-- 名称 -->
                <el-table-column
                header-align='center'
                align='center'
                prop='itemCode'
                width="300"
                :label="$t('group.name')">
                </el-table-column>
                <!-- 备注 -->
                <el-table-column
                header-align='center'
                align='center'
                prop='desc'
                :label="$t('user.remarks')">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column 
                header-align='center'
                align='center' 
                width="150"
                :label="$t('user.operation')"> 
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleUpdate(scope.row)">{{$t('btn.edit')}}
                    </el-button>
                  </template> 
                </el-table-column>
              </el-table-column>
              <!-- 启用状态 -->
              <el-table-column
              header-align='center'
              align='center'
              :label="$t('RiskManager.EnabledState')">
                <!-- 首借 -->
                <el-table-column
                header-align='center'
                align='center'
                prop='againOrderStatus'
                width="150"
                :label="$t('ModelDisplay.FirstBorrowing')">
                <template slot-scope="scope">
                  <div class="btns" v-bind:class="{'active':scope.row.strategyStatus === 1 && (scope.row.againOrderStatus === 1 || scope.row.againOrderStatus === 3)}"></div>
                </template>
                </el-table-column>
                <!-- 复借 -->
                <el-table-column
                header-align='center'
                align='center'
                prop='againOrderStatus'
                width="150"
                :label="$t('RiskManager.DoubleLending')">
                <template slot-scope="scope">
                  <div class="btns" v-bind:class="{'active':scope.row.strategyStatus === 1 && (scope.row.againOrderStatus === 2 || scope.row.againOrderStatus === 3)}"></div>
                </template>
                </el-table-column>
              </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listQuery.page"
              :page-sizes="[15, 20, 35, 30]"
              :page-size="listQuery.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-card>
        <!-- 风控规则配置 -->
        <el-dialog :title="$t('route.RuleManager')" :visible.sync="dialogFormVisible" :before-close = "closeDialog" center>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="left" style="width: 92%;">
              <!-- 编号 -->
              <el-form-item :label="$t('RiskManager.number')" prop="index">
                <el-input size='small' v-model="form.index" disabled></el-input>
              </el-form-item>
              <!-- 名称 -->
              <el-form-item :label="$t('group.name')" prop="itemCode">
                  <el-input size='small' v-model="form.itemCode" disabled></el-input>
              </el-form-item>
              <!-- 输入值 -->
              <el-form-item :label="$t('RiskManager.inputValue')" required v-if="isShow === 3">
                  <el-col :span="11">
                      <el-form-item prop="ext1Min">
                          <el-input size='small' :placeholder="$t('RiskManager.minVal')" v-model="form.ext1Min" style="width: 100%;"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2" style="text-align: center;">-</el-col>
                  <el-col :span="11">
                      <el-form-item prop="ext1Max">
                          <el-input size='small' :placeholder="$t('RiskManager.maxVal')" v-model="form.ext1Max" style="width: 100%;"></el-input>
                      </el-form-item>
                  </el-col>
              </el-form-item>
              <div v-if="isShow === 2">
                <!-- 斋戒期间 -->
                <!-- 男性拒绝时间 -->
                <el-form-item :label="$t('RiskManager.FastDuring')" required>
                  <el-col class="line" :span="6">{{$t('RiskManager.MaleRefusalTime')}}</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext1Min">
                      <el-input size='small' :placeholder="$t('RiskManager.minVal')" v-model="form.ext1Min" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext1Max">
                      <el-input size='small' :placeholder="$t('RiskManager.maxVal')" v-model="form.ext1Max" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <!-- 女性拒绝时间 -->
                <el-form-item required>
                  <el-col class="line" :span="6">{{$t('RiskManager.WomenRefusalTime')}}</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext2Min">
                       <el-input size='small' :placeholder="$t('RiskManager.minVal')" v-model="form.ext2Min" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext2Max">
                      <el-input size='small' :placeholder="$t('RiskManager.maxVal')" v-model="form.ext2Max" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <!-- 非斋戒期间 -->
                <!-- 男性拒绝时间 -->
                <el-form-item :label="$t('RiskManager.FastNoDuring')" required>
                  <el-col class="line" :span="6">{{$t('RiskManager.MaleRefusalTime')}}</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext3Min">
                      <el-input size='small' :placeholder="$t('RiskManager.minVal')" v-model="form.ext3Min" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext3Max">
                      <el-input size='small' :placeholder="$t('RiskManager.maxVal')" v-model="form.ext3Max" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <!-- 女性拒绝时间 -->
                <el-form-item required>
                  <el-col class="line" :span="6">{{$t('RiskManager.WomenRefusalTime')}}</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext4Min">
                      <el-input size='small' :placeholder="$t('RiskManager.minVal')" v-model="form.ext4Min" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="8">
                    <el-form-item prop="ext4Max">
                      <el-input size='small' :placeholder="$t('RiskManager.maxVal')" v-model="form.ext4Max" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </div>
              <!-- 借款类型 -->
              <el-form-item :label="$t('RiskManager.borrowType')" prop="againOrderStatus">
                <el-checkbox-group v-model="form.againOrderStatus">
                  <el-checkbox :label="1">{{$t('ModelDisplay.FirstBorrowing')}}</el-checkbox>
                  <el-checkbox :label="2">{{$t('RiskManager.DoubleLending')}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <!-- 确认 -->
              <el-button type="primary" @click="enable('form')" style="margin-right: 20px;">{{$t('btn.confirm')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getChannels } from "api/customQuery/index";
import {
  ruleManagePage,
  updateMinMax,
  updateMinMaxCache,
  pageStrategy,
  updateStrategy
} from "api/RiskManager/RuleManager/index";
export default {
  data() {
    return {
      checked1: false,
      checked2: false,
      isShow: 1,
      form: {
        index: undefined,
        itemCode: undefined,
        againOrderStatus: [],
        ext1Min: undefined,
        ext1Max: undefined,
        ext2Min: undefined,
        ext2Max: undefined,
        ext3Min: undefined,
        ext3Max: undefined,
        ext4Min: undefined,
        ext4Max: undefined
      },
      rules: {
        index: [
          {
            required: true,
            message: this.$t("rule.inp")
          }
        ],
        itemCode: [
          {
            required: true,
            message: this.$t("rule.names")
          }
        ],
        ext1Min: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext1Max: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext2Min: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext2Max: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext3Min: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext3Max: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext4Min: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ],
        ext4Max: [
          {
            required: true,
            message: this.$t("rule.choose")
          },
          { 
            pattern: /^[0-9]\d*$/, 
            message: this.$t('creditSupermarket.ruleNumber') 
          }
        ]
      },
      dialogFormVisible: false,
      listLoading: false,
      total: null,
      listQuery: {
        limit: 15,
        page: 1,
        clientId: '' // 渠道
      },
      statusArr: [
        {
          value: '',
          label: this.$t("rule.all")
        },
        {
          value: 1,
          label: this.$t('grouping.enable')
        },
        {
          value: 2,
          label: this.$t('AppVersion.blockup')
        }
      ],
      tableData: [],
      typeArr: [
        {
          value: 3,
          label: this.$t("rule.all")
        },
        {
          value: 1,
          label: this.$t("ModelDisplay.FirstBorrowing")
        },
        {
          value: 2,
          label: this.$t("RiskManager.DoubleLending")
        }
      ],
      appChannel: []
    };
  },
  computed: {
    ...mapGetters(["elements", "RulesManagerPage"])
  },
  created() {
    if (this.RulesManagerPage.has(this.$route.path)) {
      this.listQuery = this.RulesManagerPage.get(this.$route.path);
    }
    // 渠道下拉
    getChannels().then(res => {
      this.appChannel = res.data;
      this.listQuery.clientId = this.appChannel[0].channel
      this.getList();
    });
  },
  methods: {
    closeDialog(done) {
      done();
      this.$refs["form"].resetFields();
      this.getList();
    },
    // 点击编辑按钮
    handleUpdate(row) {
      this.$nextTick(()=>{
        if (this.$refs.form !== undefined) {
          this.$refs.form.resetFields() // 等弹窗里的form表单的dom渲染完在执行this.$refs.form.resetFields()，去除验证
        }
      })
      this.form = Object.assign({}, row);
      if (this.form.strategyStatus === 2) {
        this.form.againOrderStatus = [] // 首借 复借都不选
      } else if (this.form.strategyStatus === 1) {
        if (this.form.againOrderStatus === 1) {
          this.form.againOrderStatus = [1] // 只选首借
        } else if (this.form.againOrderStatus === 2) {
          this.form.againOrderStatus = [2] // 只选复借
        } else if (this.form.againOrderStatus === 3) {
          this.form.againOrderStatus = [1, 2] // 首借 复借都选
        }
      }
      this.dialogFormVisible = true;
      if (row.styleCode === 'BASE') { // 基本样式
        this.isShow = 1;
      } else if (row.styleCode === 'TIME') {
        this.isShow = 2;
      } else if (row.styleCode === 'VALUE') {
        this.isShow = 3;
      }
    },
    // 确认按钮
    enable(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm(this.$t("loanDetail.cue1"), {
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
            type: "warning",
            center: true
          })
            .then(() => {
              let obj = Object.assign({}, this.form)
              if (obj.againOrderStatus.length === 0) { // 首借 复借都不选
                obj.strategyStatus = 2 // 禁用
                obj.againOrderStatus = 1
              } else if (obj.againOrderStatus.length === 1) {
                obj.strategyStatus = 1 // 启用
                if (obj.againOrderStatus[0] === 1) { 
                  obj.againOrderStatus = 1 // 只选首借
                } else if (obj.againOrderStatus[0] === 2) {
                  obj.againOrderStatus = 2 // 只选复借
                }
              } else if (obj.againOrderStatus.length === 2) {
                obj.strategyStatus = 1 // 启用
                obj.againOrderStatus = 3 // 首借 复借都选
              }
              updateStrategy(obj).then(res => {
                if (res.status === 200) {
                  this.dialogFormVisible = false
                  this.getList()
                  this.$notify({
                    title: this.$t("user.success"),
                    message: this.$t("approvalDispatch.opersuccess"),
                    type: "success",
                    duration: 2000
                  });
                } else {
                  this.$message({
                    showClose: true,
                    type: "warning",
                    message: res.message
                  });
                }
              })
            })
            .catch(() => {
              this.$message({
                showClose: true,
                type: "info",
                message: this.$t("loanDetail.cue3")
              });
            });
        } else {
          return false;
        }
      });
    },
    getList() {
      this.listLoading = true;
      this.$store.dispatch("saveRulesManagerPage", {
        path: this.$route.path,
        listQuery: this.listQuery
      });
      let obj = {}
      obj.page = this.listQuery.page
      obj.limit = this.listQuery.limit
      if (!this.checked1 && !this.checked2) {
        obj.againOrderStatus = '' // 首借 复借都不选
      } else if (this.checked1 && !this.checked2) {
        obj.againOrderStatus = 1 // 只选首借
      } else if (!this.checked1 && this.checked2) {
        obj.againOrderStatus = 2 // 只选复借
      } else if (this.checked1 && this.checked2) {
        obj.againOrderStatus = 3 // 首借 复借都选
      }
      this.appChannel.forEach(item => {
        if (item.channel === this.listQuery.clientId) {
          obj.clientId = item.channelsClientResponse === '' ? null : item.channelsClientResponse.clientId
        }
      })
      // 若有clientId
      if (obj.clientId) {
        pageStrategy(obj).then(res => {
          if (res.status === 200) {
            res.data.records.forEach((item, index) => {
              item.index = 
                index + (this.listQuery.page - 1) * this.listQuery.limit + 1;
            });
            this.listLoading = false;
            this.tableData = res.data.records;
            this.total = Number(res.data.total);
          } else {
            this.$message({
              showClose: true,
              type: "warning",
              message: res.message
            })
          }
        })
      } else {
        this.listLoading = false
        this.tableData = []
        this.total = 0
      }
    },
    // 查询
    search() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    }
  }
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.menu-title {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .searchItem {
    display: flex;
    align-items: center;
    padding: 10px 0;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      font-size: 12px;
      color: #5f5f61;
      padding-right: 5px;
    }
    div:nth-child(2) {
      width: 150px;
    }
  }
  .searchItem-date {
    display: flex;
    align-items: center;
    padding: 10px 0;
    b {
      margin: 0 10px;
      font-weight: normal;
      font-size: 12px;
      color: #5f5f61;
    }
    div {
      width: 150px;
    }
  }
}
.menu-title-btn {
  padding: 10px 0;
  box-sizing: border-box;
  margin-left: 20px;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(2) {
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}
.menu-list {
  padding: 20px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}
.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url("../../../assets/images/unchecked.svg");
}
.active {
  background-image: url("../../../assets/images/checked.svg");
}
.line {
  text-align: center;
}
</style>